﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Espaçamento entre elementos</title>
<!-- 
Primeiro de tudo vamos colocar uma div que envolva nossa lista e ela terá a propriedade overflow:hidden,
para que deixamos a nossa lista sem quebra por causa do float


Depois vamos setar a nossa tag ul com uma largura maior do que nossa div no caso 110%, ou seja,
a nossa lista terá 10% a mais de largura do que nossa div e vamos esconder essa sobra com o overflow:hidden

E por fim daremos um float:right; para termos nossos itens um do lado do outro e colocaremos cor, altura e largura só para mostrar ele em tela
-->

<style>

*{
	margin:0;
	padding:0;
}

.wrap{
	margin:0 auto;
	overflow:hidden;
	border:1px red solid;
	width:640px;
}

	.wrap ul{
		width:110%;
		overflow:hidden;
	}
	
	.wrap ul li{
		
		list-style:none;
	}

.itens{
	background-color:#0F3;
	width:200px;
	height:200px;
	margin-right:10px;
	float:left;
	
}

	.itens-left{margin-left:10px;}

</style> 

</head>

<body>


<div class="wrap">
	<ul>
		<li><div class="itens itens-left"></div></li>
		<li><div class="itens"></div></li>
		<li><div class="itens"></div></li>
	</ul>
</div>
</body>

</html>

